<html>
<head>
    <title>Testing vibrate 3 times on the top page</title>
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <script src="/js-test-resources/user-gesture-utils.js"></script>
    <script>
        function startTest()
        {
            test(function() {
              assert_false(
                  navigator.vibrate(200),
                  "1. Vibrate w/o user gesture is blocked.");
            });

            // A manual click should enable vibrate.
            var element = document.getElementById("test");
            simulateUserClick(element.offsetLeft + 2, element.offsetTop + 2);
            performTestWithClick();
        }

        function performTestWithClick()
        {
          test(function () {
            assert_true(
                navigator.vibrate(200),
                "2. Vibrate triggered by user gesture succeeded.");
          });
          window.requestAnimationFrame(performTestAfterClick);
        }

        function performTestAfterClick()
        {
           test(function () {
             assert_true(
                 navigator.vibrate(200),
                 "3. Vibrate after user gesture succeeded.");
           });
        }
    </script>
</head>
<body onload="startTest();">
    <button id="test">Click to vibrate</button>
</body>
</html>
